<template>
  <a-spin :spinning="loading">
    <div  class="home_contains">
      <div class="content-bg">
        <el-row :gutter="24" type="flex" justify="space-around">
          <card title="今日帐号概况">
            <template v-slot:content>
              <div class="item_line">
                <cardItem :imageSource="require('@/assets/home/home0.png')" hintTitle="增加人员（人）" :number="account.addCount || 0"/>
                <cardItem :imageSource="require('@/assets/home/home1.png')" hintTitle="删除人员（人）" :number="account.deleteCount || 0"/>
                <cardItem :imageSource="require('@/assets/home/home2.png')" hintTitle="修改人员信息（次）" :number="account.updateCount || 0"/>
              </div>
            </template>
          </card>
          <card title="今日认证概况" style="margin-left: 37px;">
            <template v-slot:content>
              <div class="item_line">
                <cardItem :imageSource="require('@/assets/home/home3.png')" hintTitle="登录认证（次）" :number="auth.login || 0"/>
                <cardItem :imageSource="require('@/assets/home/home4.png')" hintTitle="认证成功（次）" :number="auth.loginSucceed || 0"/>
                <cardItem :imageSource="require('@/assets/home/home5.png')" hintTitle="认证失败（次）" :number="auth.loginFailure || 0"/>
              </div>
            </template>
          </card>
        </el-row>
        <el-row :gutter="24" type="flex" justify="space-around" style="margin-top: 24px">
          <card title="今日帐号详情">
            <template v-slot:content>
              <cardTable v-bind:action="logininforStatistics"  :dataKeys="dataKey" :height="380"/>
            </template>
          </card>
          <card title="今日认证详情">
            <template v-slot:content>
              <cardTable :action="logininforList" :dataKeys="dataKey2"  :height="380"/>
            </template>
          </card>
        </el-row>
      </div>
    </div>
  </a-spin>
</template>

<script>
  import card from './components/card'
  import cardItem from './components/cardItem'
  import cardTable from './components/cardTable'
  import {
    logininforStatistics,
    accountProfile,
    certificationOverview,
    logininforList
  } from './service'
  export default {
    name: "index",
    data() {
      return {
        loading: false,
        account: {},
        auth: {},
        fillterStatus: {
          '0': '新增',
          '1': '删除',
          '2': '修改',
          '3': '登录 ',
          '4': '修改密码 ',
        },
        dataKey: [
          {
            prop: 'createTime',
            label: '时间',
            align: 'center',
          },
          {
            prop: 'createBy',
            label: '管理员',
            align: 'center',
          },
          {
            prop: 'operType',
            label: '操作类型',
            align: 'center',
            formatter: (row) => {
              return this.fillterStatus[row.operType]
            }
          },
          {
            prop: 'userName',
            label: '操作对象',
            align: 'center',
          }
        ],
        dataKey2: [
          {
            prop: 'loginTime',
            label: '时间',
            align: 'center',
          },
          {
            prop: 'userName',
            label: '账号',
            align: 'center',
          },
          {
            prop: 'studentId',
            label: '学工号',
            align: 'center',
          },
          {
            prop: 'status',
            label: '操作类型',
            align: 'center',
            formatter: (row) => {
              return row.status === '0' ? '成功' : '失败';
            }
          }
        ]
      }
    },
    methods: {
      logininforStatistics,
      logininforList
    },
    components: {
      card,
      cardItem,
      cardTable
    },
    mounted() {
      this.loading  = true;
      Promise.all([accountProfile(), certificationOverview()])
        .then(res => {
          this.loading = false;
          this.auth = res[1].data.statistics
          this.account = res[0].data.statistics
        })
    }
  }
</script>

<style lang="less" scoped>
  .home_contains{
    padding: 60px 34px 0px 60px;
    .content-bg{
      width: 100%;
      padding: 40px 46px;
      border-radius: 10px;
      background-color: #ffffff;
    }
  }
  .item_line{
    width: 100%;
  }

</style>

